﻿import React from 'react';
import {Link, hashHistory} from 'react-router';
import { Button, Icon,  Table, Spin, Popconfirm, message } from 'antd';
import QueryForm from './queryForm'
import classNames from 'classnames';
import {connect} from 'react-redux'
import SearchInput from '../../components/SearchInput'
import './index.css'
import { companysQuery, companysDelete } from '../../actions'

const ButtonGroup = Button.Group;

class CompanyQuery extends React.Component {

	constructor(props){
		super(props);
		this.state = {
			selectedRowKeys:[],
			searchFromVisible: false,
      batchDeleteDisabled: true,
      parameter:{},
		};
	}

  componentWillMount () {
    const param = {
      pageSize: 10,
      current: 1,
    };
    this.setState({parameter: param});
    this.props.dispatch(companysQuery.request()(param));
  }

  handleTableChange(pagination, filters, sorter) {
    const param = {
      ...this.state.parameter,
      pageSize: pagination.pageSize || 10,
      current: pagination.current || 1,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    };
    this.props.dispatch(companysQuery.request()(param));
  }

	onAdvancedSearchClick() {
		this.setState({searchFromVisible:!this.state.searchFromVisible});
	}

	onSelectChange(selectedRowKeys) {
		this.setState({ selectedRowKeys });
	}

  onSearchClick(value) {
    const param = {...this.state.parameter, name: value};
    this.props.dispatch(companysQuery.request()(param));
  }

  onQueryClick(value) {
    const param = {...this.state.parameter, ...value};
    this.props.dispatch(companysQuery.request()(param));
  }

  onCompanysDelete() {
    this.props.dispatch(companysDelete.request()({ids:this.state.selectedRowKeys}))
  }

	render() {

		const rowSelection = {
			selectedRowKeys:this.state.selectedRowKeys,
			onChange: this.onSelectChange.bind(this),
		};

		let { data, loading, pagination } = this.props;
    const paginationTable = {
      showSizeChanger:true,
      pageSizeOptions:['10', '20', '50', '100'],
      pageSize:10,
      current:1,
      total:0,
      ...pagination
    };
    let cityFilter = [];
    let provinceFilter = [];
    data.forEach((company) => {
      let foundCityIndex = cityFilter.findIndex((value) => {
        value.text == company.city
      });
      if (company.city && foundCityIndex == -1) {
        cityFilter.push({text: company.city, value: company.city});
      }
      let foundProvinceIndex = provinceFilter.findIndex((value) => {
        value.text == company.province
      });
      if (company.province && foundProvinceIndex == -1) {
        provinceFilter.push({text: company.province, value: company.province});
      }
    });

    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        sorter: true,
        width: '80',
        sorter: true,
        fixed: 'left'
      },
      {
        title: '公司名称',
        dataIndex: 'name',
        width: '180',
        fixed: 'left'
      },

      {
        title: '省份',
        dataIndex: 'province',
        filters:provinceFilter
      },
      {
        title: '城市',
        dataIndex: 'city',
        filters:cityFilter
      },
      {
        title: '地址',
        dataIndex: 'address',
      },
      {
        title: '邮编',
        dataIndex: 'zipCode',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
      {
        title: '企业性质',
        dataIndex: 'type',
      },
      {
        title: '所属行业',
        dataIndex: 'industry',
      },
      {
        title: '注册资本',
        dataIndex: 'registeredCapital',
      },
      {
        title: '规模',
        dataIndex: 'scale',
      },
      {
        title: '是否上市',
        dataIndex: 'stockMarket',
      },
      {
        title: '联系人',
        dataIndex: 'linkman',
      },
      {
        title: '部门',
        dataIndex: 'department',
      },
      {
        title: '职务',
        dataIndex: 'title',
      },
      {
        title: '固定电话',
        dataIndex: 'telephone',
      },
      {
        title: '手机号码',
        dataIndex: 'mobile',
      },
    ];
		// 表格的列控制
		return (
			<div>
				<div style={{ marginTop: 24, marginBottom: 16 }} className="clearfix">
					<div className="pull-left">
            <Popconfirm title="确定要删除这些学生的数据吗？" onConfirm={this.onCompanysDelete.bind(this)} onCancel={()=>{}}>
						  <Button disabled={(this.state.selectedRowKeys.length == 0)} type="primary">批量删除</Button>
             </Popconfirm>
					</div>
					<div className="pull-right">
						<SearchInput placeholder="请输入公司名称关键字" onSearch={this.onSearchClick.bind(this)} style={{ width: 200 }} />
          </div>
				</div>
        <Spin spinning={loading}>
          <Table rowSelection={rowSelection} rowKey='id' pagination={paginationTable} scroll={{ x: 2500 }} columns={columns} dataSource={data} onChange={this.handleTableChange.bind(this)} />
        </Spin>
      </div>
    );
	}
}

function mapStateToProps(state) {
  return {
    data: state.enterprise.data,
    loading: state.enterprise.loading,
    pagination:state.enterprise.pagination,
  };
}

export default connect(mapStateToProps)(CompanyQuery)
